import { createApp } from 'vue'
import Message from '@/components/Message.vue'

/**
 * 显示消息提示
 */
export const showMessage = (options) => {
  const { text, type = 'info', duration = 3000 } = typeof options === 'string'
    ? { text: options }
    : options

  // 创建容器
  const container = document.createElement('div')
  document.body.appendChild(container)

  // 创建组件实例
  const app = createApp(Message, {
    text,
    type,
    duration
  })

  // 挂载组件
  const instance = app.mount(container)

  // 自动清理
  setTimeout(() => {
    app.unmount()
    document.body.removeChild(container)
  }, duration + 500)

  return instance
}

// 快捷方法
export const message = {
  success: (text, duration) => showMessage({ text, type: 'success', duration }),
  error: (text, duration) => showMessage({ text, type: 'error', duration }),
  warning: (text, duration) => showMessage({ text, type: 'warning', duration }),
  info: (text, duration) => showMessage({ text, type: 'info', duration })
}

export default message